<template>
	<div ref="infoWrapElem" class="infoWrap" :style="{ left: `${position.x}px`, top: `${position.y}px` }">
		<div class="head">
			<span class="title">设备信息</span>
			<CloseOutlined class="close" @click.native="handleClose"></CloseOutlined>
		</div>
		<div class="main">
			<ul>
				<li>
					<span class="name">设备类型：</span><span class="desc">{{ resolveType(infoData.type) }}</span>
				</li>
				<li>
					<span class="name">设备状态：</span><span class="desc">{{ resolveStatus(infoData.status) }}</span>
				</li>
				<li>
					<span class="name">布设地址：</span><span class="desc">{{ infoData.address }}</span>
				</li>
			</ul>
		</div>
		<div class="footer">
			<a-button class="details">查看详细信息</a-button>
			<a-button class="play" type="primary">播放视频</a-button>
		</div>
	</div>
</template>

<script setup name="info">
import { CloseOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core';

const props = defineProps({
	position: Object,
	infoData: Object
});
const emit = defineEmits(['onClose']);
let infoWrapElem = ref(null);
/** */
const handleClose = () => {
	emit('onClose', false);
};
/**类型 */
const resolveType = type => {
	let result = { 1: '序列号', 2: 'ip' };
	return result[type];
};
/**状态 */
const resolveStatus = status => {
	let result = { 0: '离线', 1: '正常' };
	return result[status];
};
// onClickOutside(infoWrapElem, () => {
// 	emit('onClose', false);
// });
</script>

<style lang="less" scoped>
.infoWrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 304px;
	background-color: #fff;
	.head {
		height: 36px;
		line-height: 36px;
		display: flex;
		padding: 0 12px;
		justify-content: space-between;
		align-items: center;
		.title {
			font-weight: 500;
			font-size: 16px;
			line-height: 24px;
		}
		.close {
			cursor: pointer;
		}
	}
	.main {
		padding: 16px;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-style: solid;
		border-color: #ececec;
		li {
			line-height: 28px;
			color: #1d2129;
			font-size: 14px;
			.name {
				color: #4e5969;
			}
		}
	}
	.footer {
		display: flex;
		align-items: center;
		height: 48px;
		justify-content: center;
		.details {
			margin-right: 8px;
		}
	}
}
</style>
